<template>
  <div class="navbarcontainer-productcenter">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-row class="title">请选择产品的平台</el-row>
        <el-row>
          <el-col :span="12" v-for="i in platform" :key="i.name">
            <!-- 同路由参数改变组件数据不刷新的解决方法：a标签绑定点击事件强制刷新页面，router-link绑定的点击事件无法强制刷新页面 -->
            <a
              class="link"
              href="javascript:void(0);"
              @click="handleProductlist(i.id,i.category_usable[0].id==undefined? i.category_usable[0]:i.category_usable[0].id)"
            >{{i.name}}</a>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="18">
        <el-row class="title">热门产品推荐</el-row>
        <el-row :gutter="10">
          <el-col
            v-for="(j,k) in platformHot"
            :key="j.id"
            :lg="6"
            :md="8"
            :sm="8"
            :xs="8"
            :class="k==3?'hidden-md-and-down':''"
          >
            <el-card :body-style="{ padding: '0px' }" shadow="never">
              <router-link href="javascript:void(0);" class="link2" :to="`/user/product/${j.id}`">
                <img :src="j.image[0]" class="image" />
                <div style="padding: 14px; text-align: center;">
                  <span>{{j.name}}</span>
                </div>
              </router-link>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import platformjson from '../../../../../lib/platform.json'
import producthotjson from '../../../../../lib/product-hot.json'
export default {
  data() {
    return {
      platform: platformjson, // 疑问：是否同级组件传值导致platform在实现功能时会突然变成ProductcenterContainer组件中处理过的tagsData
      platformHot: producthotjson
    }
  },
  methods: {
    // 触发ProductcenterContainer.vue中的changePlatform方法实现页面不刷新切换当前页面的平台数据
    handleProductlist(pid, cid) {
      if (this.$route.name !== 'productcenter') {
        this.$router.push({
          path: `/user/productcenter/${pid}/${cid}/1`
        })
      } else {
        this.Emit.$emit('changePlatform', pid, cid)
      }
    }
  }
}
</script>

<style lang="less" scope>
.navbarcontainer-productcenter {
  height: 250px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  box-sizing: border-box;
  .title {
    font-size: 16px;
    color: #409eff;
    user-select: none;
    cursor: default;
    font-weight: 700;
  }
  a {
    text-decoration: none;
    color: #303133;
  }
  .link {
    display: block;
    &:hover {
      color: #ff0000;
      text-align: center;
    }
  }
  .link2 {
    font-weight: 700;
    &:hover {
      color: #409eff;
    }
  }
  .image {
    height: 129px;
    display: block;
    width: auto;
    margin: 0 auto;
  }
}
</style>
